<template>
  <el-menu
    active-text-color="#358fdb"
    background-color="#2f3c4d"
    class="el-menu-vertical-trader"
    default-active="2"
    text-color="#fff"
    @open="handleOpen = true"
    @close="handleClose = true"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><User /></el-icon>
        <span>系统管理</span>
      </template>
      <router-link to="/usrMng">
        <el-menu-item index="1-1">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
      </router-link>
      <router-link to="/trascMng">
        <el-menu-item index="1-2">
          <template #title>
            <el-icon><Money /></el-icon>
            <span>交易管理</span>
          </template>
        </el-menu-item>
      </router-link>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>配置管理</span>
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { User, Setting, Avatar, Money } from "@element-plus/icons-vue";
import { ref } from "vue";
const handleOpen = ref(false);
const handleClose = ref(false);
</script>

<style>
.el-menu-vertical-trader {
  height: 97vh;
}
</style>
